<!DOCTYPE html>
<html>
<head>
    <title>Row template</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
            <div id="example" class="k-content">
            <table id="grid">
                <colgroup>
                    <col class="photo" />
                    <col class="details"/>
                    <col/>
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            Picture
                        </th>
                        <th>
                            Details
                        </th>
                        <th>
                            ID
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3"></td>
                    </tr>
                </tbody>
            </table>
            <script id="rowTemplate" type="text/x-kendo-tmpl">
	            <tr>
		            <td class="photo">
                       <img src="../../content/web/Employees/#:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" />
		            </td>
		            <td class="details">
			           <span class="title">#: Title #</span>
			           <span class="description">Name : #: FirstName# #: LastName#</span>
			           <span class="description">Country : #: Country# </span>
		            </td>
		            <td class="employeeID">
		               #: EmployeeID #
		            </td>
	           </tr>
            </script>
            <script>
               $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                          type: "odata",
                          transport: {
                              read: {	
                                  url: "http://demos.kendoui.com/service/Northwind.svc/Employees",
                              }
                          }
                        },
                        rowTemplate: kendo.template($("#rowTemplate").html()),
                        height: 430
                    });
               });
            </script>
            <style scoped>
                .photo {
                    width: 140px;                    
                }
                .details {
                    width: 400px;
                }                
                .title {
                    display: block;
                    font-size: 1.6em; 
                }
                .description {
                    display: block;
                    padding-top: 1.6em;
                }
                .employeeID {
                    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
                    font-size: 50px;
                    font-weight: bold;
                    color: #898989;
                }
                td.photo, .employeeID {
                    text-align: center;
                }
                .k-grid-header .k-header {
                    padding: 10px 20px;
                }
                .k-grid td {
                    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
                    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    padding: 20px;
                }
            </style>
        </div>

</body>
</html>
